<template>
  <div class="bank-account" v-show="cancels">
    <p>账号管理</p>
    <div class="bankData">
      <div class="account">
        <span>银行卡账号:</span>
        <p>{{ cardNum }}</p>
      </div>
      <div class="balance">
        <span>余额:</span>
        <p>
          <span>{{ totalMoney }}</span
          >元
        </p>
      </div>
    </div>
    <div class="btnCard">
      <el-button color="#000" @click="close">返回提现</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useOrderData } from "../../stores/allOrder";

const useOrder = useOrderData();

const props = defineProps({
  totalMoney: {
    type: Number,
    default: 0,
  },
  cardNum: {
    type: Number,
    default: 0,
  },
});

// const accountObj = ref({});
// const totalMoney = ref(0);
// const accountCard = ref(0);
// const accObj = async () => {
//   accountObj.value = await useOrder.getAccountData();
//   accountCard.value = accountObj.value.cardnum;
// };
// accObj();

const cancels = ref(false);
/**
 * open
 * 点击打开银行卡管理页面
 */
const open = () => {
  cancels.value = true;
};
/**
 * close
 * 点击关闭银行卡管理页面
 */
const close = () => {
  cancels.value = false;
};
// 向父组件暴露方法
defineExpose({
  open,
  close,
});
</script>

<style lang="less" scoped>
.bank-account {
  width: 1320px;
  height: 1030px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  background: #fff;
  z-index: 99;
  p:first-child {
    font-size: 18px;
    font-weight: 700;
    margin: 100px 0 0 150px;
  }
  .bankData {
    width: 400px;
    height: 160px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
    margin: 50px 0 0 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .account,
    .balance {
      display: flex;
      font-size: 16px;
      margin-left: 30px;
      p {
        margin-left: 20px;
      }
    }
    .balance {
      p {
        span {
          font-size: 20px;
          font-weight: bold;
          color: orangered;
          margin-right: 20px;
        }
        color: #000;
        font-size: 14px;
      }
    }
  }
  .btnCard {
    width: 200px;
    height: 50px;
    margin: 50px 0 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button {
      width: 80px;
      height: 30px;
      color: #fff;
    }
  }
}
</style>
